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Ведущий разработчик 
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Conf 2022 
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Я и Яндекс 


| Учился в ШАДе (но не закончил) 
| Читаю лекции в ШРИ (про сборку, ѕіс) 


| На Чемпионате Яндекса по программированию 
| заставлял людей писать свой тришейкинг (но простой) 


Никита 
| Почти 5 лет в Маркете (и для меня это много) Сидоров 


| В продакшене Яндекса крутится мой код Ha: 
| JS, TS, Python, С++, Java (и даже не падает) 


| Увлекаюсь code mining (тут без но) 


Я, Яндекс и FrontendConf 
mec mm NU 
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Превосходная кружка для повседневного использования. 
Это не просто красивый сувенир, но ещё и полезная вещь 530 pP 
дома и Ha работе. Такая кружка позволит вам выделиться 
BÉ из толпы или сделать незабываемый подарок Ha любой 133 P x сплитом 
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Кружка Frontend developer 
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ProductShortDescription 
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Описание 


Превосходная кружка для повседневного использования. 
Это не просто красивый сувенир, но ещё и полезная вещь 
дома ина работе. Такая кружка позволит вам выделиться 
из толпы или сделать незабываемый подарок на любой 
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Кружка Frontend developer 
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Характеристики 


Тип кружка 
[ој О] 
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Внешний вид товаров и/или упаковки может быть изме 
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|" MapkeT = фронтенд коа) Elements Console Sources А Network 


(ж Search (text or /гедех/) 


Performance Memory Application Lighthouse Components Profile 


@ А Anonymous 
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> attrs: (data-offer-id: "aE88dWHrdAlvNJgGGeqTag") 

» children: 
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„eslintignore 
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flowconfig 
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.gitignore 
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.npmrc 

.nvmrc 
.pnpmfile.cjs 

a.yaml 
babelrc.browser.js 
babelrc.jest.js 
babelrc.node.js 
jest.config.js 
lighthouserc.js 
package.json 
pci-dss-package.json 
pnpm-lock.yaml 
README.md 
replace-webpack.js 
report.json 


report.txt 


ВІ README.md 


Marketfront 


Фронтенд пользовательской части Яндекс MapkeTa. 


• Быстрый старт — документация по работе с репозиторием: структура проекта, FAQ и подготовка к работе 
. Общие соглашения 
• Соглашения по именованию сущностей 
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История Маркет 


Почему доклад появился 


5 net B Маркете 


2017 2022 
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Что в итоге 


| 120+ фронтов писали и пишут код 
| Более 3KK loc (и зто фронт) 


| Однозначный факт наличиа большого количества кода из 2017 
года, который не обновлаетса 


| Много мест про одно и то же с точки зрения семантики 


| Много старой логики, которая не нужна сервису 
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Содержание 


00 | 
01 | 
02 | 
03 | 
04 | 


05 | 


Фронтенд 


История Маркета 


Сборочный граф 


Подготовка данных 


Анализ сетей 


Realworld 


Большой фронтенд 


Селективность 


Дизайн-системы 


Микрофронтенды 


Сборочный граф 


Получаем данные 


Граф зависимостеи модулей 


| Граф ориентированный, без циклов 
» Узелвграфе — модуль 


> Ребро — задается синтаксисом системы модулей ESM/CommonJS/etc. 


Граф 


// а.]5 


import something from './b'; 


ЕС KE 


Граф 


// а.15 


const something = require('./b'); 


ЕС KE 


Как CTDOMTb 


| Ваша тулза Ha любимом ЯП с использованием AST/Regex 


› Вариант для сложных проектов с несколькими системами сборок, 
неочевидными зависимостями на уровне fs 


Ваша любимая система сборки 


> Вариант для большинства типовых проектов 
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O(n): CommonJS + ESM 


Top level and no dynamic parts 


Current JavaScript module formats have a dynamic structure: What is imported and 
exported can change at runtime. One reason why ES6 introduced its own module 
format is to enable a static structure, which has several benefits. But before we go 
into those, let’s examine what the structure being static means. 


It means that you can determine imports and exports at compile time (statically) — 
you only need to look at the source code, you don't have to execute it. ES6 enforces 
this syntactically: You can only import and export at the top level (never nested 
inside a conditional statement). And import and export statements have no dynamic 
parts (no variables etc. are allowed). 


16.9.3 Can I use variables in an import statement? 


No, you can't. Remember — what is imported must not depend on anything that is 
computed at runtime. Therefore: 


// Illegal syntax: 
import foo from 'some module'+SUFFIX; 


httos://exploringjs.com/es6/ch_modules.html#static-module-structure 
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O(1): ESM 


ESM+CJS vs ESM 


| AST 
^ ESM+CJS: 237 секунд 
^ ESM: 112 секунд 

| Кедех 
> ESM: 12 секунд 
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Opensource создание графа 


о 


Dependency cruiser 
Validate and visualise dependencies. With your rules. JavaScript. TypeScript. CoffeeScript. ES6, CommonJS, AMD. 


What's this do? 


| https://github.com/dyatko/arkit 
| https://github.com/pahen/madge 
| https://github.com/sverweij/dependency-cruiser 
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TLDR 


| Запоминаем 


> 
> 


Узел — модуль (js, CSS, etc.) 

Ребро — вызов import/require 

Нам могут быть интересны даже библиотечные зависимости 
Быстрее всего взять данные из сборщика 


Написать своего сборщика может быть интересно 
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Подготовка данных 


Из сборки 


Система сборки 


Быстрый старт 
| webpack --json > stats.json (статы сборки) 
Плюсы: 


| Строго определены входные точки сборки — entry 
Информация достоверна и актуальна 
| Этап построения графа и так выполняется при сборке 


Минусы: 
| Придетса реально собрать проект 


| Нужно собирать все рантаймы (и сервер в TOM числе) 
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Memory usage, MB 


Сборка сервера 


| [Тул-реквест С минифицированным серверным кодом показал заметное 
уменьшение потребления памяти: 


— Base Heap Total 
Heap Total diff — PR Heap Total 


600 
500 


400 


200 


0 10000 20000 30000 40000 50000 
Requests 


https://habr.com/ru/company/yandex/blog/666870 
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Webpack stats 


// оптимальная секция для получения графа 


// https://webpack.js.org/api/stats/#root 
const stats = 4 


all: false, 
entrypoints: true, 
modules: true, 
reasons: true, 


| httos://gist.github.com/nickshevr/bóe/5b0295aa3//5935be0bfde0c89c46 
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"modules": | 


"ја": 0, 

"identifier": "/Users/nickshevr/Documents/TS/nooby-3-shake/src/data.json", 
"name": "./src/data.json", 

"index": 54, 

"index2": 52, 

"size": 9, 


"cacheable": true, 

"built": true, 

"optional": false, 

"prefetched": false, 

"chunks": | 

Q 

l, 

"issuer": "/Users/nickshevr/Documents/TS/nooby-3-shake/node modules/babel-loader/ 

Lib/index.js??ref--4!/Users/nickshevr/Documents/TS/nooby-3-shake/src/fp.]s", 
"155џег1а": null, 
"issuerName": "'./src/fp.js', 
"issuerPath": | 


"id": null, 

"identifier": '/Users/nickshevr/Documents/TS/nooby-3-shake/node_modules/babel— 
Loader/Lib/index.js??ref--4!/Users/nickshevr/Documents/TS/nooby-3-shake/src/index.js", 

"name": "./src/index.]s" 30 


? 


"modules": | 


"id": 0, 
"name": "./src/data.json", 
"reasons": [ 


"module": "./src/index.js", 
"type": "harmony side effect evaluation", 
Т, 
1 
"module": "./src/fp.js", 
"type": "harmony side effect evaluation", 
Т, 
|, 
"usedExports": | 
"default" 
|, 
"providedExports": | 
"Qo", 
p: ; 
2” , 
"default" 


], 
p 
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ОЧИ СС ^. L 


"10": 0, 
"name": './src/data.json', 
"reasons": | 


"module": "./src/index.]s', 

"type": "harmony side effect evaluation", 
Т, 
4 

"module": "./src/fp.js', 

"type": "harmony side effect evaluation", 
r, 


|, 
"usedExports": | 
"default" 


1. " 
IMA алая nNnaAanEunnrtc!! а Г 


| 


| 


"module": "./src/fp.js', 
"type : “harmony side effect evaluation”, 
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sedExports": | 
"default" 


rovidedExports": | 


“default” 


По-быстрому 


| https://statoscope.tech/ 


о O N OU 2 W 


10 
11 
12 
13 
14 
15 
16 
17 


const StatoscopePlugin = require('@statoscope/webpack-plugin').default; 


const config = í 


entry: í 


p 


plugins: 


about: './src/pages/About.js', 


home: './src/pages/Home.js', 


[ 


new HtmlWebpackPlugin(), 
new StatoscopePlugin(< 


}), 


saveStatsTo: ‘stats.json', 
saveOnlyStats: false, 
open: false, 
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Пребразование в граф 


| Граф — это множество вершин и ребер (V, E) 


for (const [, module] of modules) { 
vertexes.push({ 
Id: module.id, 
Label: module.name, 
Treeshaked: calcTreeshaked(module), 
Provided: module.providedExports ? module.providedExports.length 


Used: module.usedExports 2 module.usedExports.length : -l, 
+); 
for (const reason of module.reasons.values()) { 
edges.push(( 
Source: module.id, 
Target: reason.moduleId, 
Label: reason.userRequest, 
JsType: reason.type 
+); 
} 
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Подводные камни 


> Нужно отключать module concatenation 


Entrypoints Modules Duplicate modules Chunks Assets Packages 


index.js + 


+| js ../src/widgets/pages.touch/OrdersPage/index.js 518.35 kb +324 modules 
+| js ../src/widgets/parts/ReturnCandidate/index.js 446.41 КЫ +219 modules 
+| js platform.touch/widgets/pages/ProductPage/index.js 421.66kb +187 modules 


[+}- js ../src/widgets/content/checkout/common/CheckoutParcels/index.js 737.79 КЫ +179 modules 


+| js ../src/widgets/parts/MinimalHeader/index.js 129.26kb +111 modules 

+| js ../src/widgets/content/cart/CartList/index.js 358.97kb +105 modules 

+| js ../src/widgets/parts/OrderConfirmation/index.js 186.71 КЫ +96 modules 

+| js ../src/widgets/content/cart/CartTotalInformation/index.js 210.34kb +90 modules 
+| js _ ../src/widgets/content/checkout/layout/CheckoutLayoutLoader/index.js 319.23 kb 


+87 modules 
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Подводные камни 


> Попадают модули после оптимизации (He учитываем 
оптимизации terser) 


import (f) from './getter'; 


if (process.NODE ENV === 'dev') { 
console.log(f(1)); 
console.log(f(2)); 

} 


py 


Подводные камни 


> Попадают модули после оптимизации (He учитываем 
оптимизации terser) 


import (f) from './getter'; 


if (false) { 
console.log(f(1)); 


console.log(f(2)); 
} 
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Подводные камни 


> Попадают модули после оптимизации (не учитываем 
оптимизации terser) 
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Re-exports 


import {first} from "./reexport" 


Проект: 
Project w e = = “x — йш Src/index.js gs. INdex2.js js. reexport/in 
| Me export * from './1'; 


v reexport 


515 export * from './2'; 


2 export * from './B'; 
258 Э.)$ 
js index.js 


COopka: 


Entrypoints Modules Duplicate module 


ree 


js src/reexport/1.js 0.14 kb 
js src/reexport/index.js 0.06 kb 
js src/reexport/2.js 0.05 kb 
js src/reexport/3.js 0.05 kb 
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Re-exports 


import {first} from "./reexport" 


Project v Ө = = © — 4 гслпдех ј5 js. index2.js je» reexport/in 
v M reexport 
2 export * from './2'; 
asa 2.js 3 export ж from './B'; 
= 3.|5 
js index.js 4 


Сборка: 


Entrypoints Modules Duplicate module 


ree 
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Точные данные 


=< 7 


" urs " 


"providedExports": [ ] 
"second" "brovidedExports": [ 
], "first" 
"optimizationBailout": [], at "m | 
"optimizationBailout": [], 
"depth": 2 "depth": 1 
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Тришеикинг 


| usedExports, providedExports 


) null - отсутствует информация 


> true - есть косвенные маркеры, сообщающие об 
использовании B paHTaMMe. Например, sideEffect 


) false - ничего не используется 


> [ exportl', 'export2'] - перечисление 
используемых единиц экспорта 


https://github.com/webpack/webpack/blob/da/412/bfeacff01 7c5d60842351b41 36atba/94/lib/ExportsInfo.js#L46 7 
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TLDR 


| Запоминаем 


> (таты получаем через Statocope Plugin, его же используем для 
погружения 


> Длаанализа интересны только Modules, но могут быть интересны и 
Chunks 


> Отключаем ModuleConcatenation 


> Дополнительной метрикой берем информацию о тришейкинге 
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Анализ сетеи 


Смотрим и понимаем данные 


Анализ сетей 


| Что это и зачем 


› Анализ социальных сетеи (поиск друзей, кластеризация 
КОМЬЮНИТИ) 


› Анализ других сетей, например, транспортных (выделение 
критических путей) 


› Биология (анализ скорости распространения вирусов) 


46 


Анализ сетей 


ГРАФЫ В КОМПАНИИ 


E-mail (количество писем) 

Skype for business (звонки) 

Календари (встречи) 

Проекты (длительность) 

Коммиты в Gitlab (время 

между коммитами) 

Бизнес-юниты (расстояние в орг. структуре) 


Географические локации (расстояние) 


Aitsubbotn|k 


https://www.youtube.com/watch?v=ge1FHBRr81Q 
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Анализ сетей NA 


https://www.openculture.com/2017/10/the-philosophers-web.html 


| 
` 
Ww ћу 
4 
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Основной инструмент 


€ Gephi File Workspace View Tools Window Help Обучение in h © © (а) LJ. O $ Т зах ва) Wed9:00AM а © 
eoe Gephi 0.9.5 - Holy2022.gephi 
E Preview Kn 
ro 
| Workspace 3 X | Workspace 4 X v 
Data Table x a 
Nodes Edges © Configuration © Add node (+) Add edge Ly Search/Replace ЕР) Import Spreadsheet gr Export table 4 More actions v Filter: Interval М 9 
Interval Id Label used provided treeshaked 
143 ./src/entities/offer/getters/getPastPurchase.js -1 1 0.0 
144 ./src/entities/offer/getters/hasSaleRestriction.js -1 1 0.0 
145 ./src/entities/offer/getters/isPremium.js -1 1 0.0 
147 ./src/entities/offer/selectors/selectDenormalizedOfferByShowPlacedld.js -1 1 0.0 
148 ./src/entities/offer/selectors/selectlsLoyalty ProgramEnabledBy Offerld.js -1 1 0.0 
149 ./src/entities/offer/selectors/selectOfferBy Cartltemld.js -1 1 0.0 
150 ./src/entities/offer/selectors/selectOfferByShopld.js -1 1 0.0 
151 ./src/entities/offer/selectors/selectOfferCpaByVisibleSearchResultld.js -1 1 0.0 
152 ./src/entities/offer/selectors/selectOfferFilters.js -1 1 0.0 
153 ./src/entities/offer/selectors/selectOfferlds BySearchResultld.js -1 1 0.0 
154 ./src/entities/offer/selectors/selectOffersBylds.js -1 1 0.0 
155 ./src/entities/offer/selectors/selectOffers By OfferShowPlacelds.js -1 1 0.0 
156 ./src/entities/offer/selectors/selectOffersidsBy OfferShowPlacelds.js -1 1 0.0 
157 ./src/entities/offer/selectors/selectOffersldsWithCpaBySearchResultld.js -1 1 0.0 
158 ./src/entities/offer/selectors/selectPromosBy OfferShowPlaceld.js -1 1 0.0 
159 ./src/entities/offerShowPlace/helpers/createEmpty OfferShowPlaceCollections.js -1 1 0.0 
162 ./src/entities/offerShowPlace/selectors/selectDefaultOfferShowPlaceldsByVisibleSearchResultld... -1 1 0.0 
163 ./src/entities/offerShowPlace/selectors/selectOfferShowPlaceldBy Offerld.js -1 1 0.0 
164 ./src/entities/offerShowPlace/selectors/selectOfferShowPlaceldsWithAnalog.js -1 1 0.0 
165 ./src/entities/offerShowPlace/selectors/selectOfferShowPlaceldsWithBenefit.js -1 1 0.0 
166 ./src/entities/offerShowPlace/selectors/selectOfferShowPlaceldsWithCutPrice.js -1 1 0.0 
167 ./src/entities/offerShowPlace/selectors/selectOfferShowPlaceldsWithoutBenefit.js -1 1 0.0 
Fi W Ej Ej Hi Hi Hi i i Ел EE 
Add Merge Delete Clear Copy data to Fill column Duplicate Create a boolean column Create column with list Negate Convert column 
column columns column v | column v | other column v | with a value v | column v from regex match v of regex matching groups v boolean values v to dynamic v 


http://gephi.org ыы 


Паиплаин данных 


Edges, Vertexes 


TLDR 


| Запоминаем 
> Данные импортируем из CSV: вершины и ребра 
> Длаанализа удобно раскрасить по разным признакам 
> Граф укладываем при помощи алгоритма Force Atlas 


» Добавляем веса вершинам, это улучшает раскладку 
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Пример для примера 


Realworld 


‘= README.md 


at 
Sas RealWorld example apps 


Өр React x django 


See how the exact same Medium.com clone (called Conduit) —À—— c = 
is built using different frontends and backends. Yes, you can — Oc 
mix and match them, because they all adhere to the same AP! © 

spec O х 


While most "todo" demos provide an excellent cursory glance at а 
framework's capabilities, they typically don't convey the knowledge & 
perspective required to actually build rea/ applications with it. AO 


RealWorld solves this by allowing you to choose any frontend (React, 
Angular, & more) and any backend (Node, Django, & more) and see how they 
power a real-world, beautifully designed full-stack app called Conduit. 


VIEW DEMO 


Read the full blog post announcing RealWorld on Medium. 


Join us on GitHub Discussions! Ж 


Implementations 


Over 100 implementations have been created using various languages, libraries, and frameworks. 


Explore them on CodebaseShow. 
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conduit 


conduit 


A place to share your knowledge. 


Global Feed 


ы Magda Parry Ф 67 
October 9, 2022 


Quos unde hic іа doloribus, labore, sit sed aut fugiat aliquid dicta fugiat, labore 
doloribus, laborum sed magnam quaerat occaecati hic, possimus voluptate 
labore magnam possimus sunt maiores ducimus neque sequi, blanditiis sunt 
quos occaecati excepturi facilis blanditiis. Unde at tenetur quas hic esse, 
ducimus doloribus tenetur facilis repellat doloribus excepturi excepturi aliquid 
voluptatibus sunt necessitatibus consequuntur laborum neque nostrum 
necessitatibus nihil et nemo enim quasi labore beatae ullam id est excepturi 
consequuntur nostrum nulla in, hic asperiores. Aut maiores quas consequuntur 
voluptatem enim est, exercitationem quasi sed quaerat reiciendis consectetur 
nostrum rerum ducimus id nemo magnam cupiditate blanditiis magnam 
voluptatibus reiciendis quaerat voluptate excepturi esse unde hic. Vitae quia id 
esse voluptatibus nihil nihil eos vitae dolores quos. Cupiditate fugiat occaecati 
ipsum necessitatibus consequuntur. 


Veritatis officiis est occaecati sunt consequatur. Aut sapiente totam sed ad ad qui eum omnis deleniti. Quis blanditiis aperiam. 


Read more... quasi || vel || blanditiis || deserunt 


(d 


Repellat nihil in magnam quasi. Et dicta at est laborum doloribus sit. Quia 
possimus necessitatibus magnam, est, nulla, reiciendis exercitationem neque et 
tenetur quia deserunt asperiores blanditiis doloribus ipsum beatae numquam. 
Ullam rerum consequuntur occaecati error. Possimus consequatur consectetur 
doloribus voluptate nihil, tenetur sunt fugiat quae id, ducimus non. 


Eos necessitatibus officia quos. Et vitae aliquid autem occaecati repudiandae placeat repellat odit. Minus iure voluptates autem 
quam dicta. Iste consequatur aspernatur voluptas quibusdam sint beatae. 


necessitatibus || sequi )( vitae || doloribus 


Home Signin Signup 


Popular Tags 


OOCOEW 


22 


conduit 


Quos unde hic id doloribus, labore, sit sed aut fugiat 
aliquid dicta fugiat, labore doloribus, laborum sed 
magnam quaerat occaecati hic, possimus voluptate 
labore magnam possimus sunt maiores ducimus neque 
sequi, blanditiis sunt quos occaecati excepturi facilis 
blanditiis. Unde at tenetur quas hic esse, ducimus 
doloribus tenetur facilis repellat doloribus excepturi 
excepturi aliquid voluptatibus sunt necessitatibus 
consequuntur laborum neque nostrum necessitatibus 
nihil et nemo enim quasi labore beatae ullam id est 
excepturi consequuntur nostrum nulla in, hic asperiores. 
Aut maiores quas consequuntur voluptatem enim est, 
exercitationem quasi sed quaerat reiciendis consectetur 
nostrum rerum ducimus id nemo magnam cupiditate 
blanditiis magnam voluptatibus reiciendis quaerat 
voluptate excepturi esse unde hic. Vitae quia id esse 
voluptatibus nihil nihil eos vitae dolores quos. Cupiditate 
fugiat occaecati ipsum necessitatibus consequuntur. 


6 Magda Parry | + Follow Magda Parry | 
October 3, 2022 z 


Nemo repudiandae molestiae\nNobis sed ducimus aperiam.\nBeatae cupiditate praesentium in omnis. Voluptatibus harum ullam 
odio sed animi corporis. Dolorum eius dignissimos et magnam voluptate aut voluptatem natus.\nAut sint est eum molestiae 
consequatur officia omnis.\nQuae et quam odit voluptatum itaque ducimus magni dolores ab.nDolorum sed iure voluptatem et 
reiciendis. Incidunt doloremque enim autem quam et magnam et expedita fuga.\nPlaceat quia dolor ut.\nNon dolor amet 
temporibus quas non hic sed.\nQui tempore enim mollitia omnis sed ut eos rerum et\nQuidem voluptas est vel. Debitis facilis 
dolorum maiores aut еї\пЕа voluptas magnam deserunt at ut sunt voluptatem \пЕї voluptatem voluptatem \nUt est fugiat 


magnam. Autem reiciendis provident iure possimus.\nOccaecati soluta quibusdam libero tenetur minus vel sit illo\nCulpa optio 


© Fork on GitHub 
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Рассматриваемые проекты 


[ Стек 
> React + Effector 


» Angular 


| Потенциальные общие признаки 


» Вездеесть Store 


> Вездевыделены сушности: Page, Component, Model, иногда 
Features 


> Основные домены: Article, Profile, Comment 


oy 


Дисклеймер 


[ Я не изучал качество работ и считаю, что взял средний проект на 
выбранных технологиях V (У) / 
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Nodes: 230 
Edges: 698 
Directed Graph 


Nodes Edges Ф A T 


Unique Partition Ranking 


jstype М 


harmony import specifier (78.51%) 
cjs require (9.6%) 
cjs self exports reference (6.02%) 


import() (1.86%) 
harmony export imported spe... (1.58%) 


cjs export require (1.15%) 
harmony side effect evaluation (1%) 
cjs full require (0.29%) 
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TLDR 


| Почти всегда для разных задач нужно смотреть разные срезы 
| Обозначенные признаки видны только Ha 1 M3 графов 


| Декомпозиция Ul крайне похожа 
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Step ratio 0.95 = : 
Adaptive Cooling ge Overview 
Convergence Threshold 1.0E-4 Avg. Path Length Run 
Barnes-Hut's properties El Dynamic 
Quadtree Max Level 10 Т Š "mee "- 
Theta 1 .2 3 NN š 
зе MK SZT: =. А EN # Edges Run 
Ж KA d ; RES Y ~ Degree Run 
. А a” \\ Ж ‘A маг. њи 
@ —— S | Clustering Coefficient Run 
Yifan Hu 


> [> M 5 


Степени вершин 


Results: 


Average Degree: 3.859 


Degree Distribution 
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B File 


+ Загрузить файлы 


B MarketStats.csv 


? 


Error.js 


»r.js 


imeoutError.js 


icket/RequestsBucket.js 


ue.js 


x.js 


ueTask.js 


icket/Request.js 


icket/index.js 


rt.js 


»eValidator.js 


x.js 


Array.js 


'omJson.js 


JnreadCounter.js 


qelpers.js 


name 
../node_modules/@yandex-int/messenger.errors/lib/TransportError.js 
../node_modules/@yandex-int/messenger.errors/lib/index.js 
../node_modules/@yandex-int/messenger.errors/lib/ErrorVisitor.js 


../node_modules/@yandex-int/messenger.errors/lib/RequestTimeoutError.js 


../node_modules/@yandex-int/messenger.utils/lib/RequestsBucket/RequestsBucket.js 


../node_modules/@yandex-int/messenger.utils/lib/Event.js 
../node_modules/@yandex-int/messenger.utils/lib/index.js 
../node_modules/@yandex-int/messenger.utils/lib/Queue/Queue.js 
../node_modules/@yandex-int/messenger.utils/lib/Queue/index.js 
../node_modules/@yandex-int/messenger.utils/lib/Queue/QueueTask.js 
../node_modules/@yandex-int/messenger.utils/lib/RequestsBucket/Request.js 
../node_modules/@yandex-int/messenger.utils/lib/RequestsBucket/index.js 
../node_modules/@yandex-int/messenger.utils/lib/Shape/Assert.js 
../node_modules/@yandex-int/messenger.utils/lib/Shape/ShapeValidator.js 
../node_modules/@yandex-int/messenger.utils/lib/Shape/index.js 
../node_modules/@yandex-int/messenger.utils/lib/axiosData.js 
../node_modules/@yandex-int/messenger.utils/lib/compareArray.js 
../node_modules/@yandex-int/messenger.utils/lib/memo.js 
../node_modules/@yandex-int/messenger.utils/lib/debounce.js 
../node_modules/@yandex-int/messenger.utils/lib/deduplicateArray.js 
../node_modules/@yandex-int/messenger.utils/lib/getObjectFromJson.js 
../node_modules/@yandex-int/messenger.utils/lib/guid.js 
../node_modules/@yandex-int/messenger.unread-counter/lib/UnreadCounter.js 


../node_modules/@yandex-int/messenger.unread-counter/lib/helpers.js 


https://cloud.yandex.ru/services/datalens 
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treeshaked 
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Degree 
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E timeset 60 
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Мир тесен 


| Распределение экспоненциальное 


> Такоераспределение характерно для графов “мир тесен” (безмасштабный граф) 


Количество городов 


0 10 20 30 40 50 60 70 80 
Количество авиасвязей 


При исследовании динамики развития безмасшабных сетей было обнаружено, что 
образование новых связей в сети происходит не случайным образом, а в соответствии с 
т.н. «механизмом преимущественного присоединения» 
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https://readings.gmik.ru/files/2010/965a02d856dd34d/7b60f4de5654d46ff. pdf 


Мир тесен 


Ассортативность способствует усилению кластеризации в растущей 
безмасштабной сети. Благодаря механизму преимущественного 
присоединения и ассортативности, безмасштабная сеть сохраняет свои 
свойства независимо от размеров сети, т.е. остается безмасштабной в 
процессе развития. 

Поскольку внутрироссийская сеть магистральных авиалиний по 
своей топологии близка к безмасштабнои сети (т.е. имеет свойства, 
характерные для безмасштабных сетей), процесс её развития может 
рассматриваться как совокупность процессов развития подсетей 
сильносвязных концентраторов, принадлежащих разным уровням 
иерархии в топологической структуре сети авиалиний. 


https://readings.gmik.ru/files/2010/965a02d856dd34d7b60f4de5654d46ff. pdf 
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TLDR 


| Для стабильной работы системы нужно развивать качество подсетей 
основных хабов 


1. React 


2. Apiary (core framework) + Клиентская Метрика (cia) 


3. Модель представления товара, заказа 
4. Ulkit 


| Создавать новые хабы будет дорого (aka сколько стоит переписать проект) 
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Селективность 


Не всегда панацея 


Селективность 


| Мы He всегда менаем систему полностью, хорошо было бы понимать 
› какую часть мы изменили 


› какие тесты/сборки/еїс. запустить 


| Считаем, что так мы сократим ресурсы 
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Селективность 


Селективность 


Селективность 


Селективность 


Центральность 


| Степень центральности 


> Количество путей в графе, которые проходат через данный 
узел 


| Более чувствительная и удобная метрика 
› Позволяет оценить устойчивость системы к изменениям 


> Позволяет находить важнейшие модули системы 
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7 Ë r~\A IR 
b d 


| Workspace 1 X . Workspace 2 X 


Appearance X — Graph X ез Preview X > v Context X m 
Nodes Edges Ф 6) А TI % Dragging (Configure) Nodes: 11782 
Unique Partition Ranking 5 Edges: 45471 
Modularity Class Vall Directed Graph 
0 85.9496 ы ° ° Filters x Statistics z 
[zd ( ) © 
Шз (2.73%) RE 4 9 = 
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и \ s ж x ы inter cages 
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4 .879 | 
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. о 
e a 
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56 (0.496) > e | Authority Float (Node) 
18 (0.38%) т Betweenness Centrality Double (Node) 
48 (0.28%) © У т Closeness Centrality Double (Node) 
ча (n DOŁA е r Degree Integer (Node) 
T Palette... a e e ? Eccentricity Double (Node) 
ве b Apply ө š ue. ( т Eigenvector Centrality Double (Node) 
" | ©. Ф e | r Harmonic Closeness Centrality Double (Node) 
ыла m " | „87 N МА" e. Y Hub Float (Node) 
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- Y rer Y ; 
Yifan Hu V © 4 platfoffn.t ›исһ/ fidgets/ || Queries 
© | e NON e A 9; a xÇ т Range (Betweenness Centrality) 
Ө > Run Š © ө. a U | SN ° NW т Range (Closeness Centrality) 
| ө ° Wa; ее а ® Parameters 
Yifan Hu's properties e o e @ Drag subfilter here 
Optimal Distance 200.0 ө | Хз gS r Range (Degree) 
Relative Strength 0.2 ө | < ë Parameters 
Initial Step size 20.0 e——e—— e ~~ @ Drag subfilter here 
Step ratio 0.95 N = 
Adaptive Cooling e— 9—— —————————- => j 
Convergence Threshold 1.0E-4 e- —— YF ==” == - 
Barnes-Hut's properties e—* —— BZ 
Quadtree Max Level 10 и „ВС 2 | 
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О © Gg ы 
id e. 
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а © р ж š Z И | | 
A .platform.touch/widgets/pages/MarketBusinessPage/widgets.js 7 | | % 418834.7884520261 
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fy | jej р 


Центральность 


| Что может сломать весь сервис разом — Пишем тесты 
1. Дизаин-система 
2. Логика работы с товарными предложениями 
3. Логика работы с заказами 


4. Функционал Промо на Маркете 
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Количество запущенных TECTOB 


| Количество запущенных тестов — случайная величина 


> Она, безусловно, зависит от другой случайной величины — вероятности внесения 
изменений в конкретный модуль 


| Мы He XOTUM поведения, при котором мы B медиане запускаем 90% тестов 


090 — 100% тестов p90 — 50% тестов 
p50 — 90% тестов p50 — 20% тестов 


90 


Вероятность внесения изменений 


git log --since "1 year ago" --name-only --pretty="format:" | sed '/*\s*$/'d | 
sort | unig -c | sort -r 


Termi... run.sh Local (3) Local (4) Local (5) Local + 
189 src/widgets/content/checkout/common/CheckoutMedicalCartDeliveryEditor/epics/common.js 


175 package-Lock.json 


172 src/widgets/content/checkout/common/CheckoutMedicalCartDeliveryEditor/controller.js 


145 package.json 

134 market/platform.desktop/widgets/pages/ProductPage/controller.js 
132 market/platform.touch/widgets/pages/ProductPage/controller.js 

126 market/pLatform.desktop/components/DefauLtOffer/index.js 

116 market/platform.desktop/widgets/content/RecommendedOffers/controller.js 
98 market/platform.desktop/widgets/pages/SearchPage/controller.js 

96 market/src/components/Search/Snippet/Product/Cell/index.js 

93 market/platform.desktop/widgets/content/RecommendedOffers/view.js 
92 src/entities/offer/getters.js 

91 src/entities/checkout/cartGroup/selectors/index.js 

90 src/resources/report/fetchPrime/index.js 

87 market/platform.touch/widgets/parts/DefaultOffer/controller.js 

86 market/src/components/Search/Snippet/Product/Card/index.js 

75 market/platform.touch/components/DefaultOffer/index.js 


Что делать 


Data Table х 
Nodes Edges Configuration © Add node (+) Add edge т Search/Replace Import Spreadsheet 
а Label Closeness Centrality Частота изменений 
3677 ../src/entities/offer/selectors/index.js 0.249866 
1341 ../src/entities/offer/getters.js 0.284461 
1649 ../src/utils/fp.js 0.236289 
2177 ../src/uikit/components/index.js 0.214175 
459 ../src/utils/browser/index.js 0.177243 
3638 ../src/entities/checkout/cartGroup/selectors/index.js 0.275332 
198 ./src/entities/product/selectors/index.js 0.237932 m od u | е С a a n g e S / 
146 ./src/entities/offer/selectors/index.js 0.224992 
4744 ../src/utils/browser/history .js 0.152249 
1759 ../src/entities/visibleSearchResult/selectors/index.js 0.200065 tota | C П а 1 g е 5 
2306 ../src/components/WidgetWrapper/index.js 0.259275 
3899 ../src/widgets/content/RootScrollBox/index.js 0.194833 
3940 ../src/components/Snippet/index.touch.js 0.128115 
1730 ../src/entities/order/getters.js 0.322106 
240 ./src/entities/visibleSearchResult/selectors/index.js 0.201683 
1736 ../src/entities/payment/getters.js 0.221442 
2213 ../src/containers/AbstractTooltipContainer/index.js 0.154322 
2214 ../src/uikit/components/AbstractTooltip/index.js 0.134274 
10643 ../src/entities/outlet/selectors.js 0.285201 
194 ./src/entities/product/getters/index.js 0.238111 
2679 ../src/entities/picture/selectors.js 0.176999 


3632 ../src/entities/checkout/cart/selectors/index.js 0.280723 


Что делать 


| Для реального сокращения кол-ва запускаемых TeCTOB 
1. Минимизируем внесение изменений в ключевых модулах 


2. Есливеримв себя, пишем простую эвристику из топ-М модулей 


5000 
4500 
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1000 
| | | x 
" | | Dll t ја | nı | 
о» © о Q © HGP PA HH LMA TH PSH PASSE ETH KOH 
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V © о> оо co? R 


Что делать 


| Для реального сокращения кол-ва запускаемых тестов 
1. Минимизируем внесение изменений в ключевых модулях 


2. Есливеримв себя, пишем простую эвристику из топ-М модулей 


о >° © 9 4 ,5 59 АУ АЁ А NEC 29 D w Do poja n A Фе © © M 6 © o «о Ф Ф д Ф 6 
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Дизайн-системы 


Правда ли удачно внедрили? 


Текущие дизайн-системы 


| Levitan — 2020 
| Uikit — 2019 


| Levitan-gui — 2017 


Authority 


| HITS — алгоритм, позволяющий находить интернет-страницы NO 
запросу пользователя на основе информации, заложенной в 
гиперссылках 


| Авторитетный документ — наибольшее число документов 
ссылаются на этот документ 


| B графах “мир тесен” определает шанс того, что новый узел 
будет связан с авторитетным документом 


97 


Дизайн-системы 


= 


1854 
2308 


Uikit x30 авторитетности 


Label 


../node_modules/@yandex-market/levitan-gui/index.js 
../node_modules/@yandex-levitan/market/index.js 


Label 
../src/uikit/components/Text/index.js 


mponents/IconR 
../src/uikit/components/Icon/index.js 
../src/uikit/components/Image/index.js 
../src/uikit/components/Layout/index.js 
../src/uikit/components/TextField/index.js 


Interval 


Interval 


Degree 


343 
91 


Degree 


388 
235 
172 
146 
143 
70 
43 
25 
22 


Closeness Сеп. 00003 “у 


0.283181 | 


0.218081 0.000533, 


Closeness Се’ 0 01 4079` 
0.307824 / ` 

o2: | 0.015298 
0.214175 \ 

0268812 N 0.00497 / 
0.275423 

0.232535 0.01409. 
0.209442 0.014079 
0.192982 0.014322 
0.187224 0.014332 
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Само по себе 


| Если не вмешиваться в продуктовую разработку, TO 
использование будет расти у более авторитетнои разработки 


> Uikit (2019)— Ton 1 
» Levitan (2020) — Ton 2 
> Levitan-gui (2017) — топ 3 
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Микро 


фронты 


Как сделать по-быстрому 


Что вынести дешево? 


— —— e 9 -rs 
— — — enn 
— — — или w —.——-—. 
-- — 
eme —9 p ete з,» 


— — ÀÀÀ 


inns SSS 


ZONY, 


_ м 
~ 
w-—— 000 


t — раната A 
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Что вынести дешево? 


—— ————— 9 


--- ——— e 9 


еее е е 


--- — —— eaa e 


— ---......... 
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Модулярность 


| Модулярность 


› Рандомизированный алгоритм для кластеризации модулей 


| Удобная метрика 


> Позволяет оценить, какую часть дешево вынести в отдельный пакет/ 
микрофронт 


> Позволяет оценить, нет ли библиотек, решающих схожие задачи 
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Модулярность 


Nodes Edges € @ ^ т 
Unique Partition Ranking 


INULIZO 481 ы моппучгацоп we маа VUC ст Auu CUYC ши Sval unnep 


Modularity Class ~ Id Label Modularity ... Ir 
(85.94%) 477 ../src/utils/price/index.js 3 
pin 1424 ../src/entities/price/getters.js 3 
(1.09%) 2060 ../src/utils/string/ty po/bonusString.js 3 
(1.05%) 2104 ../src/uikit/components/Button/index.js 3 
paka 2108 „./gre/uikit/brand/colors/colors.js 3 
(0.62%) 2109 ../src/utils/string/index.js 3 
(0.57%) 2112 ../src/utils/string/ty po/index.js 3 
ана 2177 ../src/uikit/components/index.js 3 
(0.28%) 4015 ../src/components/Snippet/index.js 3 
+ coo 4136 ../src/components/Snippet/components/index.js 3 
= b Apply 
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Модулярность 


. Workspace 4 X 


Data Table х 


Nodes Edges 


4387 
1994 
2001 
12570 
11916 
11481 
4687 
2000 
11478 
4673 
4476 
4989 
4477 
11542 
4475 
11477 
4672 
4971 
11980 
15246 
12059 
12013 


Id 


. Workspace 5 X Workspace 6 X 


*s Configuration 


Label 


../src/epics/cartService/index.js 
../src/entities/cart/cartltem/reducers.js 
../src/entities/cart/cartltemState/reducers.js 
../src/widgets/content/checkout/lay out/CheckoutLayoutMedicalCartDeliveryPage/index.js 
../src/widgets/content/cart/CartList/reducers.js 
../src/entities/checkout/cartGroup/reducers.js 
./src/widgets/core/DeprecatedCartService/reducers.js k 
../src/entities/cart/userCartltem/reducers.js 
../src/entities/checkout/cart/reducers.js 
../src/utils/cart/essential/reducers.js 
../src/entities/checkout/cartltem/reducers.js 
../src/widgets/content/CartUpsalePopup/reducers.js 
../src/entities/checkout/cartltemService/reducers.js 
../src/widgets/content/cart/CartTotalPrice/index.js 
../src/entities/cart/cartltemGroup/reducers.js 
../src/widgets/content/EmbedCartAdd/reducers.js 
./src/widgets/core/CartService/reducers.js 
../src/widgets/content/upsale/CartUpsalePopupRecommendations Content/reducers.js 
../src/widgets/content/cart/CartToasts/reducers.js 
../src/widgets/content/YandexTurboAppCartEntry Point/index.js 
../src/widgets/content/cart/CartAvailableBonuses/reducers.js 
../src/widgets/content/cart/CartNotifications/reducers.js 


Modularity ... 


O O = O = O = O = O O O O O O O O O O O O O 


@ Add node (+) Add edge twi Search/Replace Import Spreadsheet Cg Export table Jt More actions v 


Closeness Cent... 


0.265864 
0.293823 
0.267883 
0.352941 
0.292135 
0.447811 
0.252852 
0.267627 
0.434028 
0.20303 

0.247243 
0.294872 
0.241121 
0.357143 
0.197734 
0.454545 
0.252852 
0.170886 
0.357143 
0.666667 
0.357143 
0.357143 


Betweennes: 


0.000069 
0.000063 
0.000019 
0.000013 
0.00001 1 
0.000007 
0.000006 
0.000006 
0.000005 
0.000004 
0.000004 
0.000004 
0.000003 
0.000003 
0.000003 
0.000003 
0.000002 
0.000002 
0.000002 
0.000002 
0.000002 
0.000001 


./pages/article рас "X ан 
re.ts 


Jpages/n@-match.tsx 


lon/index.tsx 


./pages/profile/pages/myyarticles/model/store.ts 


./pages/profile/page -articles/model/api.ts 


Јрадезћо /tag-list.tsx 
Jp 


jeShome/ui/sideBar/index.module.css 
Јрадез/ћотвтоде а 
| JAMisitlebar/index.tsx 


./pages/hc 1 OdET/STOrTE 


Jpages/home/page d-by-tag/model/api.ts 


Jpages/home/pages/fégg-by-tag/model/store.ts 
./pages/he ар 
Jpages/home/ui/ o-glotyej4 ей: illayout.tsx 


pages/home/page ed-by-tag/index.tsx 
./pages/home/ui/logout-banner.tsx 


Jpages/h index.tsx 


bq ЕЛДЕ tex ы. 


our-feed/index.tsx 


Jpages/hómelpz Ë 
Jpages/home/pag 


hddel/store.ts 


TLDR 


| Правильная укладка графа может позволить увидеть куски, 
готовые к отселению 


| Модулярность частично решает проблему правильной 
кластеризации модулей 


| Кластеризация применима для оценки трудозатрат отселениа 
логики в отдельный сервис 


10/ 


[Полезные ссылки 


| Gephi — https://www.youtube.com/watch? 
v=UzysokhnKGg&list=LL&index=1&t=2/62s 


| Биология Ha rpabax — https://www.youtube.com/watch? 
v=vw10_9j3Lig&t=956s 


| ФилософФия Ha графах — https://www.youtube.com/watch? 
v=deFlfV3IB50&t=2433s 


| Репозитори и c графами: https://github.com/nickshevr/frontendgraph2022 
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Yandex Cup 


Яндекс запускает 
ежегодный 
чемпионат по 
программированию 


4 


Семену Левенсону 
респект! 


А скопировал слаид у 
Семена Левенсона и не 
поправил текст. 


Но QR мой, переходите! 


Frontend 
Conf 2022 
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